.terminal-box {
    width: 100%;
    height: 100%;
    padding: 12px 0px 0px 12px;
    background-color: var(--Colors-Use-Basic-Background);
}

.terminal-list-box {
    height: 100%;
    background-color: var(--Colors-Use-Basic-Background);
    overflow: auto;
    .list-item {
        color: var(--Colors-Use-Neutral-Text-1-Title);
        height: 22px;
        padding: 2px 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        .content {
            display: flex;
            flex: 1;
            align-items: center;
            gap: 2px;
            overflow: hidden;
            svg {
                height: 16px;
                width: 16px;
            }
            .title {
                flex: 1;
                overflow: hidden;
            }
        }
        .extra {
            display: none;
            align-items: center;
            .delete {
                border-radius: 2px;
                padding: 2px;
                svg {
                    height: 16px;
                    width: 16px;
                }
                &:hover {
                    background-color: var(--Colors-Use-Neutral-Bg-Hover);
                }
            }
        }
    }
    .list-item-active {
        background-color: var(--Colors-Use-Basic-Background);
        border-left: 1px solid var(--Colors-Use-Blue-Bg);
        &:hover {
            .extra {
                display: flex;
            }
        }
    }
    .list-item-no-active {
        &:hover {
            background-color: var(--Colors-Use-Basic-Background);
            .extra {
                display: flex;
            }
        }
    }
}
